<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
<!--  <link rel="stylesheet" href="">-->
  <style>
    .red {
      color: red;
    }
  </style>
</head>
<body>

<div id="app">

<!--
v-else 元素必须紧跟在带 v-if 或者 v-else-if 的元素的后面
-->

  <template v-if="isShowTit">
    <h1>{{ msg }}</h1>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
  </template>
  <template v-else>
    <h1 class="red">{{ msg2 }}</h1>
    <p>Paragraph 3</p>
    <p>Paragraph 4</p>
  </template>
  <hr>
  <button @click="toggleTit">切换标题显示</button>
  <hr>
  <div v-if="type === 'A'">
    A
  </div>
  <div v-else-if="type === 'B'">
    B
  </div>
  <div v-else-if="type === 'C'">
    C
  </div>
  <div v-else>
    Not A/B/C
  </div>
</div>

<script src="vue.js"></script>
<script>

  const app = new Vue({
    data: {
      isShowTit: true,
      msg: 'hello v-if',
      type: 'A'
    },
    computed: {
      msg2() {
        return this.msg.repeat(2)
      }
    },
    watch: {
      msg() {
        console.log('msg 变了', this.msg)
      }
    },
    methods: {
      toggleTit() {
        this.isShowTit = !this.isShowTit
      }
    },
    mounted() {
      /*
      const self = this
      setTimeout(function () {
        // console.log(this)
        console.log(self)
        self.msg = '我在 mounted 中发生了变化'
      }, 3000)
      */
    }
    // props: {},
    // components: {}
    // 生命周期钩子函数 8个
  }).$mount('#app')


</script>
<!--
.vue
<template>
<script>
<style>
-->
</body>
</html>